<template>
  <div>
    <div id="title">药品订单管理</div>

    <div id="conditions">
      <div id="conditions-head">
        <i class="el-icon-search"></i>
        <span>筛选</span>
      </div>
      <el-form :inline="true"
               :model="conditionsform"
               class="form-inline">
        <el-form-item>
          <el-input v-model="conditionsform.keywords"
                    placeholder="输入订单号或用户名"></el-input>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker v-model="conditiontime"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div id="medicineorder">
      <div id="medicineorder-head">
        <i class="el-icon-document"></i>
        <span>数据列表</span>
      </div>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="全部"
                     name="all">
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column prop="ordernumber"
                             label="订单编号"
                             width="100"></el-table-column>
            <el-table-column prop="addtime"
                             label="提交时间"
                             width="100"></el-table-column>
            <el-table-column prop="user"
                             label="用户名"
                             width="100"></el-table-column>
            <el-table-column prop="consignee"
                             label="收货人"
                             width="100"></el-table-column>
            <el-table-column prop="amount"
                             label="订单金额"
                             width="100"></el-table-column>
            <el-table-column prop="orderstatus"
                             label="订单状态"
                             width="100"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="a">
                <el-button type="text"
                           size="small"
                           @click="showMedicineOrderDetails(a.row)">查看订单</el-button>
                <el-button type="text"
                           size="small"
                           v-if="a.row.orderstatus==='待发货'">订单发货</el-button>
                <el-button type="text"
                           size="small"
                           v-if="a.row.orderstatus==='待收货'">确认收货</el-button>
                <el-button type="text"
                           size="small"
                           v-if="a.row.orderstatus==='已完成'">订单追踪</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination id="page"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage4"
                         :page-sizes="[100, 200, 300, 400]"
                         :page-size="100"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="400">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="待发货"
                     name="to-be-delivered">待发货</el-tab-pane>
        <el-tab-pane label="待收货"
                     name="being-delivered">待收货</el-tab-pane>
        <el-tab-pane label="已收货"
                     name="delivered">已收货</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Feedback",
  data () {
    return {
      conditionsform: {
        keywords: '',

      },
      conditiontime: '',
      activeName: 'all',
      tableData: [
        {
          ordernumber: '1',
          addtime: '2016-05-02',
          user: 'zhangsan',
          consignee: 'zhangsansan',
          amount: 999,
          orderstatus: '待发货',
        },
        {
          ordernumber: '2',
          addtime: '2016-05-02',
          user: 'lisi',
          consignee: 'lisisi',
          amount: 999,
          orderstatus: '待收货',
          type: 'B'
        },
        {
          ordernumber: '3',
          addtime: '2016-05-02',
          user: 'wangwu',
          consignee: 'wangwuwu',
          amount: 999,
          orderstatus: '已完成',
          type: 'C'
        },

      ],
      currentPage4: 4
    }
  },

  methods: {
    onSubmit () {
      console.log('submit!');
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        }
        )
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    multipleDelete () {
      console.log('删删删删删删删删删删删删');
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    showMedicineOrderDetails (testt) {
      this.$router.push({
        name: 'MedicineOrderDetails',
        params: testt
      })
    }

  }
}
</script>

<style>
#title {
  font-size: 25px;
  font-weight: bolder;
}
#conditions {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 180px;
}
#conditions-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-search {
  margin-left: 10px;
  margin-top: 15px;
}
.form-inline {
  margin-top: 40px;
  margin-left: 90px;
}
#medicineorder {
  margin-top: 15px;
  border-color: lightgray;
  border-width: thin;
  border-style: solid;
  width: 1000px;
  height: 1000px;
}
#medicineorder-head {
  background-color: #f2f2f2;
  height: 50px;
  font-size: 20px;
}
.el-icon-document {
  margin-left: 10px;
  margin-top: 15px;
}
#page {
  float: right;
}
</style>
